<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
			<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-'+item.id">
				<text class="s-item">{{item.name}}</text>
				<view class="t-list">
					<view @click="navToList(item.id, titem.id)" v-if="titem.pid === item.id" class="t-item" v-for="titem in tlist"
					 :key="titem.id">
						<image :src="titem.picture"></image>
						<text>{{titem.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 1,
				flist: [],
				slist: [],
				tlist: [],
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				let list = [
					/* 左侧导航栏  一级目录 */
					{
						id: 1,
						name: '妇婴保健'
					},
					{
						id: 2,
						name: '关爱中老年'
					},
					{
						id: 3,
						name: '活力儿童'
					},
					{
						id: 4,
						name: '基础营养'
					},
					{
						id: 5,
						name: '美丽女人'
					},
					{
						id: 6,
						name: '强壮男人'
					},
					{
						id: 7,
						name: '职场保健'
					},
					/* 右侧导航栏  二级目录************************************ */
					{
						id: 8,
						pid: 1,
						name: '矿物质'
					},
					{
						id: 9,
						pid: 1,
						name: '维生素'
					},
					{
						id: 11,
						pid: 2,
						name: '防治骨质疏松',
					},
					{
						id: 12,
						pid: 2,
						name: '改善三高',
					},
					{
						id: 13,
						pid: 2,
						name: '调节免疫力',
					},
					{
						id: 14,
						pid: 2,
						name: '调节睡眠',
					}, 
					{
						id: 16,
						pid: 3,
						name: '补充营养'
					},
					{
						id: 17,
						pid: 3,
						name: '小儿补钙'
					},
					{
						id: 18,
						pid: 3,
						name: '小儿维生素'
					},
					{
						id: 19,
						pid: 3,
						name: '鱼肝油'
					},
					{
						id: 20,
						pid: 4,
						name: '氨基酸'
					},
					{
						id: 21,
						pid: 4,
						name: '矿物质'
					},
					{
						id: 22,
						pid: 4,
						name: '维生素'
					},
					{
						id: 23,
						pid: 5,
						name: '阿胶'
					},
					{
						id: 24,
						pid: 5,
						name: '补血补气'
					},
					{
						id: 25,
						pid: 5,
						name: '美胸'
					},
					{
						id: 26,
						pid: 5,
						name: '排毒养颜'
					}, {
						id: 27,
						pid: 5,
						name: '消脂减肥'
					},
					{
						id: 28,
						pid: 5,
						name: '维生素'
					},
					{
						id: 29,
						pid: 6,
						name: '蛋白质粉'
					},

					{
						id: 31,
						pid: 6,
						name: '滋补肝肾'
					},
					{
						id: 32,
						pid: 6,
						name: '滋阴补肾'
					},
					{
						id: 33,
						pid: 6,
						name: '综合滋补'
					},
					{
						id: 34,
						pid: 7,
						name: '保护视力'
					},
					{
						id: 35,
						pid: 7,
						name: '蛋白质粉'
					},
					{
						id: 36,
						pid: 7,
						name: '缓解疲劳'
					},
					{
						id: 37,
						pid: 7,
						name: '调节免疫力'
					},
					
					/* 三级 **********************************************/
					{
						id: 38,
						pid: 8,
						name: '多种维生素矿物质片(女士型) ',
						picture: 'http://image.360kad.com/group1/M00/66/D7/CgAgEFgEmI6AMVNKAAGLQDTMyzw494.jpg'
					},
					{
						id: 39,
						pid: 8,
						name: '多种维生素咀嚼片 (儿童型)',
						picture: 'http://image.360kad.com/group1/M00/32/79/CgAgEFdIF4uAIfM1AAHL-uBvTSI946.jpg'
					},
					{
						id: 40,
						pid: 9,
						name: '维生素E软胶囊(滴剂)',
						picture: 'http://image.360kad.com/group1/M00/B7/1B/CgAgEFmBk1yAMRJHAAHVYFo1v8A150.jpg'
					},
					{
						id: 41,
						pid: 11,
						name: '健力多 氨糖软骨素钙片',
						picture: 'http://image.360kad.com/group2/M00/2E/11/CgAgFVpYYKaAAskQAAFdHeDqzyM938.jpg'
					},
					{
						id: 42,
						pid: 11,
						name: '百合康 百合康牌氨基葡萄糖硫酸软骨素钙胶囊',
						picture: 'https://image.360kad.com/group2/M00/EB/EF/CgAgFF5AqVOAdhYCAAI52MNLgKA885.jpg'
					},
					{
						id: 43,
						pid: 11,
						name: '钙尔奇 维生素D钙软胶囊',
						picture: 'http://image.360kad.com/group1/M00/BD/CD/CgAgEFmfh_2AXod8AAGovRB5wEA839.jpg'
					},
					
					{
						id: 44,
						pid: 12,
						name: '百合康 百合康牌苦瓜洋参软胶囊  ',
						picture: 'http://image.360kad.com/group2/M00/49/B2/CgAgFVrDTqSAGVIHAAGV10Wpvmk118.jpg'
					},
					{
						id: 45,
						pid: 12,
						name: '善存 沛优牌辅助降血脂软胶囊',
						picture: 'http://image.360kad.com/group2/M00/07/8E/CgAgFFnJzliAVGQ1AAG49eqNOdQ255.jpg'
					},
					/* 右侧导航栏  三级目录*************************************** */
				
					{
						id: 46,
						pid: 13,
						name: '康恩贝 倍仕好牌大豆异黄酮软胶囊 ',
						picture: 'http://image.360kad.com/group1/M00/10/AE/CgAgEVaE9c-AEAl5AAJvYD6uVg445.jpeg'
					},
					{
						id: 47,
						pid: 13,
						name: '绿A 天然螺旋藻精片',
						picture: 'http://image.360kad.com/group1/M00/98/6E/CgAgEVjmEASAa1XHAAL7q3BnObo120.jpg'
					},
					{
						id: 48,
						pid: 13,
						name: '百合康 百合康牌螺旋藻洋参片',
						picture: 'http://image.360kad.com/group2/M00/06/38/CgAgFVnEgs-AUbNMAAMDSpmb0Zg348.jpg'
					},
					{
						id: 49,
						pid: 14,
						name: '静心 助眠口服液',
						picture: 'http://image.360kad.com/group2/M00/CE/EC/CgAgFF2ehoyAGwoQAAFxYj91JUQ863.jpg'
					},
					{
						id: 50,
						pid: 14,
						name: '脑白金 脑白金胶囊+口服液(附礼盒袋)',
						picture: 'http://image.360kad.com/group1/M00/64/0E/CgAgEVf4QviAVywgAAGlW8Bd-Fg152.jpg'
					},
					{
						id: 51,
						pid: 14,
						name: '汤臣倍健 褪黑素片',
						picture: 'http://image.360kad.com/group1/M00/37/AA/CgAgEVdlS6GAR_cbAAHAVeYzHJE936.jpg'
					},
					
					
					{
						id: 52,
						pid: 16,
						name: '贝特晓芙 强化钙铁锌固体饮料',
						picture: 'http://image.360kad.com/group1/M00/3B/3E/CgAgEVd6KtuAFwy3AAHFLhjUMog287.jpg'
					},
					{
						id: 53,
						pid: 16,
						name: '斯利安 藻油DHA乳钙粉',
						picture: 'http://image.360kad.com/group1/M00/08/8D/CgAgEVWKSYaAGKjuAAIk6s2aB3o175.jpg'
					},
					{
						id: 54,
						pid: 17,
						name: '哈药 新盖中盖牌儿童钙片',
						picture: 'http://image.360kad.com/group1/M00/83/0C/CgAgEVh97JiAJPTqAAGuCIBhP88538.jpg'
					},
					
					
					
					{
						id: 55,
						pid: 18,
						name: '汤臣倍健 多种维生素咀嚼片 (儿童型) ',
						picture: 'http://image.360kad.com/group1/M00/32/79/CgAgEFdIF4uAIfM1AAHL-uBvTSI946.jpg'
					},
					{
						id: 56,
						pid: 18,
						name: '汤臣倍健 多种维生素咀嚼片(青少年型) ',
						picture: 'http://image.360kad.com/group2/M00/01/82/CgAgFFmyRYeAcD2BAAGMrzpSQys886.jpg'
					},
					{
						id: 57,
						pid: 19,
						name: '星鲨 鱼肝油乳 ',
						picture: 'http://image.360kad.com/group2/M00/16/49/CgAgFVoCwp6AbNvvAAGw1U2G6y8064.jpg'
					},
					{
						id: 58,
						pid: 19,
						name: '康富来 鳕鱼肝油软胶囊',
						picture: 'http://image.360kad.com/group2/M00/77/C1/CgAgFVsrBIiAH3oCAAFqQKseg-c723.jpg'
					},
					{
						id: 59,
						pid: 19,
						name: '贝特晓芙 贝特晓芙牌鳕鱼肝油软胶囊',
						picture: 'http://image.360kad.com/group2/M00/13/46/CgAgFFn4J7KAED5xAAF8NQw8m_M028.jpg'
					},
					
					
					{
						id: 60,
						pid: 20,
						name: '燕东 氨基酸口服液',
						picture: 'http://image.360kad.com/group1/M00/1C/AD/CgAgEVaYzw-ATCgvAAIFQCnBL1g39.jpeg'
					},
					{
						id: 61,
						pid: 20,
						name: '乐力 复合氨基酸螯合胶囊 ',
						picture: 'http://image.360kad.com/group1/M00/07/A4/CgAgEFWKRHqAOmENAAIE_kv3LUA536.jpg'
					},
					
					
					{
						id: 62,
						pid: 21,
						name: '锌硒宝 绿健园牌锌硒咀嚼片',
						picture: 'http://image.360kad.com/group1/M00/08/58/CgAgEVWKSFKAe-cJAAD4dBIFWT8053.jpg'
					},
					{
						id: 63,
						pid: 21,
						name: '三精 葡萄糖酸锌口服液',
						picture: 'http://image.360kad.com/group1/M00/AD/59/CgAgEFlLwY2AQcHCAAE1A4APbNs239.jpg'
					},
					{
						id: 64,
						pid: 22,
						name: '汤臣倍健 维生素C片',
						picture: 'http://image.360kad.com/group2/M00/89/CC/CgAgFFtsEpqAJzu5AAGffwgXuP8378.jpg'
					},
					{
						id: 65,
						pid: 22,
						name: '星鲨 维生素D3软胶囊',
						picture: 'http://image.360kad.com/group1/M00/08/69/CgAgEFWKSI-AXHUYAAJAFkz913k917.jpg'
					},
					{
						id: 66,
						pid: 23,
						name: '福牌阿胶 阿胶',
						picture: 'https://image.360kad.com/group2/M00/E2/A2/CgAgFF3mKPyAK4seAAMIOqdshoA353.jpg'
					},
					{
						id: 67,
						pid: 23,
						name: '东阿阿胶 阿胶',
						picture: 'http://image.360kad.com/group1/M00/9B/AA/CgAgEFj0mgOARrWOAAHCJaDkfPs835.jpg'
					},
					{
						id: 68,
						pid: 23,
						name: '佛慈 阿胶',
						picture: 'http://image.360kad.com/group2/M00/42/79/CgAgFFqrqHWAXCDyAAF8AxkaRps571.jpg'
					},
					
					
					
					
					{
						id: 69,
						pid: 24,
						name: '九芝堂 十全大补丸(浓缩丸) ',
						picture: 'http://image.360kad.com/group1/M00/1F/A3/CgAgEVbQaIOAfH5JAAI1_S0unbE693.jpg'
					},
					{
						id: 70,
						pid: 24,
						name: '九芝堂 驴胶补血颗粒',
						picture: 'http://image.360kad.com/group1/M00/89/49/CgAgEFilr2qAPee_AAHSiDju3H4425.jpg'
					},
					
					
					
					
					{
						id: 71,
						pid: 25,
						name: '美乳宝 SPA按摩胸片',
						picture: 'http://image.360kad.com/group1/M00/1C/BF/CgAgEFaZ3S2AKNYPAAEBQCyMXYc82.jpeg'
					},
					{
						id: 72,
						pid: 26,
						name: '康欣诺泰 排毒养颜片',
						picture: 'http://image.360kad.com/group2/M00/8D/F4/CgAgFFt9B6GAV-VtAAFPfkEg_q0355.jpg'
					},
					{
						id: 73,
						pid: 27,
						name: '碧生源 减肥茶',
						picture: 'http://image.360kad.com/group1/M00/69/FF/CgAgEFgSDwuAMtCGAALLat9oD2w490.JPG'
					},
					{
						id: 74,
						pid: 28,
						name: '盘龙云海 十度牌柏妮丝胶囊(左旋肉碱) ',
						picture: 'http://image.360kad.com/group1/M00/0B/B1/CgAgEFYEIGCARbftAAL-wLiz2VU87.jpeg'
					},
					{
						id: 75,
						pid: 28,
						name: '汤臣倍健 多种维生素矿物质片(女士型)',
						picture: 'http://image.360kad.com/group1/M00/66/D7/CgAgEFgEmI6AMVNKAAGLQDTMyzw494.jpg'
					},
					{
						id: 76,
						pid: 29,
						name: '【拍下方套餐更优惠】汤臣倍健 蛋白粉',
						picture: 'http://image.360kad.com/group2/M00/53/12/CgAgFFrgOfqAA_IVAAFRP5mhqXQ749.jpg'
					},
					{
						id: 77,
						pid: 29,
						name: '汤臣倍健 蛋白粉',
						picture: 'http://image.360kad.com/group2/M00/07/50/CgAgFFnIxeeAaoDjAAH_moM5B9M892.jpg'
					},
					{
						id: 78,
						pid: 31,
						name: '天添美 补肾养血丸 ',
						picture: 'http://image.360kad.com/group1/M00/6F/01/CgAgEVgnC_CASd4HAAGgqaHQzx8847.jpg'
					},
					{
						id: 79,
						pid: 31,
						name: '德良方 益肾养元颗粒',
						picture: 'http://image.360kad.com/group1/M00/23/5F/CgAgEFbzh8GALyS_AAHeogid82M390.jpg'
					},
					{
						id: 80,
						pid: 32,
						name: '蒙雄丹 参竹精胶囊',
						picture: 'http://image.360kad.com/group1/M00/09/D9/CgAgEVW5wDGAJj18AAJ6IC2pC-U01.jpeg'
					},
					{
						id: 81,
						pid: 33,
						name: '麒麟牌 麒麟丸(浓缩丸)',
						picture: 'http://image.360kad.com/group2/M00/3B/CA/CgAgFVqWYuOAbE48AAKyEpQXios308.jpg'
					},
					{
						id: 82,
						pid: 33,
						name: '强寿 益智康脑丸',
						picture: 'http://image.360kad.com/group1/M00/0C/37/CgAgEFYcaJ6AV41uAAJxYErVPFg08.jpeg'
					},
					
					
					
					
					
					{
						id: 83,
						pid: 34,
						name: '汤臣倍健 天然β-胡萝卜素软胶囊',
						picture: 'http://image.360kad.com/group1/M00/BB/0F/CgAgEFmT8NGAB5M_AAEe0qX3B3Y633.jpg'
					},
					{
						id: 84,
						pid: 34,
						name: '修正 越橘叶黄素天然β-胡萝卜素软胶囊',
						picture: 'http://image.360kad.com/group1/M00/3D/55/CgAgEVeGDVqACRiYAAHCfiInfRU163.jpg'
					},
					{
						id: 85,
						pid: 34,
						name: '来益牌 叶黄素咀嚼片',
						picture: 'http://image.360kad.com/group1/M00/9E/E2/CgAgEFkB8HKARnTLAAIGxv3QU4o234.jpg'
					},
					
					
					
					
					{
						id: 86,
						pid: 35,
						name: '汤臣倍健 蛋白粉',
						picture: 'http://image.360kad.com/group2/M00/53/12/CgAgFFrgOfqAA_IVAAFRP5mhqXQ749.jpg'
					},
					{
						id: 87,
						pid: 35,
						name: '汤臣倍健 蛋白粉伴侣固体饮料',
						picture: 'http://image.360kad.com/group1/M00/C0/2C/CgAgEFmpDsWAGFQCAAGX_iLGqks409.jpg'
					},
					{
						id: 88,
						pid: 35,
						name: '汤臣倍健 蛋白粉',
						picture: 'http://image.360kad.com/group2/M00/07/50/CgAgFFnIxeeAaoDjAAH_moM5B9M892.jpg'
					},
					{
						id: 89,
						pid: 36,
						name: '易加能 永安康健牌易加泡腾片',
						picture: 'http://image.360kad.com/group2/M00/C6/99/CgAgFV1qEVOAPZZ0AAJMw0dN5VM101.jpg'
					},
					{
						id: 90,
						pid: 36,
						name: '易加能 永安康健牌易加泡腾片',
						picture: 'http://image.360kad.com/group2/M00/B9/61/CgAgFV0imzWAIKTSAAKvVd20qXo370.jpg'
					},
					{
						id: 91,
						pid: 36,
						name: '维特健灵 五色灵芝胶囊(香港制造)',
						picture: 'http://image.360kad.com/group1/M00/08/63/CgAgEFWKSHaAJECcAAIyJgXTvfM862.jpg'
					},
					{
						id: 92,
						pid: 37,
						name: '位元堂 西洋参',
						picture: 'http://image.360kad.com/group2/M00/B2/91/CgAgFFzemWuADacqAAGQZlT_s6U864.jpg'
					},
					{
						id: 93,
						pid: 37,
						name: '汤臣倍健 螺旋藻咀嚼片(美国螺旋藻粉) ',
						picture: 'http://image.360kad.com/group1/M00/A5/B5/CgAgEVke5fCATSsWAAGcCEi5Xck701.jpg'
					},
					
					
					
					
					{
						id: 94,
						pid: 37,
						name: '康恩贝 程海湖螺旋藻片',
						picture: 'http://image.360kad.com/group1/M00/0B/4A/CgAgEVX30V6Aa2wlAAJ6INzFdeU03.jpeg'
					}
				];
				list.forEach(item => {
					if (!item.pid) {
						this.flist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
					} else if (!item.picture) {
						this.slist.push(item); //没有图的是2级分类
					} else {
						this.tlist.push(item); //3级分类
					}
				})
			},
			//一级分类点击
			tabtap(item) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}

				this.currentId = item.id;
				let index = this.slist.findIndex(sitem => sitem.pid === item.id);
				this.tabScrollTop = this.slist[index].top;
			},
			//右侧栏滚动
			asideScroll(e) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.currentId = tabs[0].pid;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize() {
				let h = 0;
				this.slist.forEach(item => {
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			navToList(sid, tid) {
				uni.navigateTo({
					url: `../tabbar-1/tabbar-1-detail`
				})
			}
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #f8f8f8;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 140upx;
			height: 140upx;
		}
	}
</style>
